import React from 'react';
import { connect } from 'react-redux';
import { addAction, squareAction, getAction } from '../actions/actions';

function Container(props){
// console.log(props);
const {num, add, square, get} = props;

  return (
      <div>
        <h1>一个基于React-Redux数据的计算器</h1>
        <p>计算结果：{num}</p>
        <button onClick={()=>add(1)}>加1</button>
        <button onClick={()=>add(2)}>加2</button>
        <button onClick={()=>square()}>乘方</button>
        <button onClick={()=>get()}>请求数据后修改计算结果</button>
      </div>
  );
}

//接收state状态(从Provider传入那拿到)
const mapStateToProps = (state) =>{
  //通过对象的方式映射出去
  return {
    num: state
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    //定义add方法
    add: (value) => dispatch(addAction(value)),
    square: () => dispatch(squareAction()),
    get: () => dispatch(getAction())
  }
}

//mapStateToProps将state映射到props
//mapDispatchToProps将dispatch映射到props
export default connect(mapStateToProps, mapDispatchToProps)(Container);